<template>
	<div>
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>权限管理</el-breadcrumb-item>
		  <el-breadcrumb-item>角色列表</el-breadcrumb-item>
		</el-breadcrumb>
		
		<!-- 卡片视图 -->
		<el-card>
		    <el-button  type="primary" @click="adddialogVisible = true">添加角色</el-button>
			<!-- 角色列表区域 -->
			<el-table :data="rolesform" style="width: 100%" border stripe>
				  <el-table-column type="expand">
					  <!-- 展开下的栅格布局 -->
					  <template slot-scope="scope">
						  <el-row :class="['bdbottom', index1 === 0 ? 'bdtop' : '', 'vcenter']" v-for="(item1,index1) in scope.row.children" :key="item1.id">
							  <!-- 一级权限 -->
						    <el-col :span="5">
								<!-- 标签tag -->
								<el-tag closable @close="removeRightById(scope.row,item1.id)">{{item1.authName}}</el-tag>
								<!-- 后面展开三角形图标 -->
								<i class="el-icon-caret-right"></i>
							</el-col>
							 <!-- 二级权限和三级权限 -->
						    <el-col :span="19">
								<!-- 二级权限 -->
								<el-row :class="[index2 == 0 ? '' : 'bdtop','vcenter']" v-for="(item2,index2) in item1.children" :key="item2.id" >
								  <el-col :span="5">
									  <!-- 标签tag -->
									  <el-tag closable @close="removeRightById(scope.row,item2.id)" type="success">{{item2.authName}}</el-tag>
									  <i class="el-icon-caret-right"></i>
								  </el-col>
								  <!-- 三级权限 -->
								  <el-col :span="19">
									  <el-tag closable @close="removeRightById(scope.row,item3.id)" type="warning"  v-for="item3 in item2.children" :key="item3.id">{{item3.authName}}</el-tag>
								  </el-col>
								</el-row>
							</el-col>
						  </el-row>
						  <!-- <pre>
							  {{scope.row}}
						  </pre> -->
					  </template>
				  </el-table-column>
				  <el-table-column  type="index"> </el-table-column>
			      <el-table-column  prop="roleName"  label="角色名称"  width="350px"> </el-table-column>
				  <el-table-column  prop="roleDesc"  label="描述"  width="350px"> </el-table-column>
				  <el-table-column  label="操作"  width="350">
					  <template slot-scope="scope">
						  <!-- {{scope.row}} -->
						  <el-button size="mini" type="primary" icon="el-icon-edit" @click="editform(scope.row.id)">编辑</el-button>
						  <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteform(scope.row.id)">删除</el-button>
						  <el-button size="mini" type="warning" icon="el-icon-setting" @click="showSetRightDialog(scope.row)">分配权限</el-button>
					  </template>
				  </el-table-column>
			    </el-table>
		</el-card>
		<!-- 添加角色对话框 -->
		<el-dialog title="添加角色" :visible.sync="adddialogVisible"  width="50%" @close="addformclose">
		  <el-form ref="addformRef" :model="addrolesform" :rules="addformRules" label-width="80px">
		    <el-form-item label="角色名称" prop="roleName">
		      <el-input v-model="addrolesform.roleName"></el-input>
		    </el-form-item>
			<el-form-item label="角色描述" prop="roleDesc">
			  <el-input v-model="addrolesform.roleDesc"></el-input>
			</el-form-item>
		  </el-form>
		  <span slot="footer">
		    <el-button @click="adddialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="adduser">确 定</el-button>
		  </span>
		</el-dialog>
		<!-- 编辑角色对话框 -->
		<el-dialog title="编辑角色" :visible.sync="editdialogVisible"  width="50%">
		  <el-form ref="editformRef" :model="editrolesform" :rules="editformRules" label-width="80px">
			<el-form-item label="角色ID" prop="roleId">
			  <el-input v-model="editrolesform.roleId" disabled></el-input>
			</el-form-item>  
		    <el-form-item label="角色名称" prop="roleName">
		      <el-input v-model="editrolesform.roleName"></el-input>
		    </el-form-item>
			<el-form-item label="角色描述" prop="roleDesc">
			  <el-input v-model="editrolesform.roleDesc"></el-input>
			</el-form-item>
		  </el-form>
		  <span slot="footer">
		    <el-button @click="editdialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="edituser">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				// 角色列表
				rolesform:[],
				// 添加角色数据对象
				addrolesform:{
					roleName:'',
					roleDesc:'',
				},
				// 添加角色对话框显示与隐藏
				adddialogVisible:false,
				// 添加角色表单验证
				addformRules:{
					roleName:[{required:true,message:'请输入角色名',trigger:'blur'},
							  {min:2,max:10,message:'请输入2-10个字符',trigger:'blur'}],
					roleDesc:[{required:true,message:'请输入角色描述',trigger:'blur'},
							  {min:3,max:20,message:'请输入3-20个字符',trigger:'blur'}]
				},
				//编辑角色对话框显示与隐藏
				editdialogVisible:false,
				// 编辑角色数据对象
				editrolesform:{},
				// 编辑角色表单验证
				editformRules:{
					roleName:[{required:true,message:'请输入角色名',trigger:'blur'},
							  {min:2,max:10,message:'请输入2-10个字符',trigger:'blur'}],
					roleDesc:[{required:true,message:'请输入角色描述',trigger:'blur'},
							  {min:3,max:20,message:'请输入3-20个字符',trigger:'blur'}]
				}
				
			}
		},
		created(){
			this.getRoleslist()
		},
		methods:{
			// 获取角色列表
			async getRoleslist(){
				const {data:res} = await this.$http.get('roles')
				console.log(res)
				if(res.meta.status != 200) return this.$message.error(res.meta.msg)
				this.rolesform = res.data
			},
			// 添加用户对话框重置
			addformclose(){
				this.$refs.addformRef.resetFields()
			},
			// 发送请求添加用户
			async adduser(){
				// 先预验证  validate()
				this.$refs.addformRef.validate(async valid=>{
					if (!valid) return
					// 验证成功发送请求
					const {data:res} = await this.$http.post('roles',this.addrolesform)
					console.log(res)
					if (res.meta.status != 200){
						return this.$message.error(res.meta.msg)
					}
					this.$message.success(res.meta.msg)
					this.adddialogVisible = false
					this.getRoleslist()
				})
			},
			// 根据id查询需要编辑的角色
			async editform(id){
				const {data:res} = await this.$http.get('roles/'+ id)
				console.log(res)
				if (res.meta.status != 200){
					return this.$message.error(res.meta.msg)
				}
				this.editrolesform = res.data
				this.editdialogVisible = true
			},
			// 编辑用户信息并提交
			edituser(){
				// 验证
				this.$refs.editformRef.validate(async valid=>{
					if(!valid) return
					//验证成功，发送请求
					const {data:res} = await this.$http.put('roles/'+ this.editrolesform.roleId,{roleName:this.editrolesform.roleName,roleDesc:this.editrolesform.roleDesc})
					console.log(res)
					if(res.meta.status != 200) return this.$message.error(res.meta.msg)
					this.$message.success(res.meta.msg)
					this.editdialogVisible = false
					this.getRoleslist()
				})
			},
			//根据id删除角色
			async deleteform(id){
				const {data:res} = await this.$http.delete('roles/'+ id)
				console.log(res)
				if (res.meta.status != 200){
					return this.$message.error(res.meta.msg)
				}
				this.$message.success(res.meta.msg)
				this.getRoleslist()
			},
			// 根据ID删除对于的权限
			async removeRightById(role,rightID){
				// 弹框提示用户是否删除  返回一个promis对象
				const confirmResult = await this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).catch(err=>err)
				// 如果用户确认删除，则返回值为字符串  confirm
				// 如果用户取消删除，则返回值为字符串  cancel
				// console.log(confirmResult)			
				if(confirmResult != 'confirm'){
					return this.$message.warning('已取消删除')
				}
				// 发送删除请求
				let {data:res} = await this.$http.delete(`roles/${role.id}/rights/${rightID}`)
				console.log(res)
				if (res.meta.status != 200){
					return this.$message.error(res.meta.msg)
				}
				role.children = res.data
				return this.$message.success(res.meta.msg)
			}
		}
	}
</script>

<style lang="less" scoped>
	.bdtop {
	  border-top: 1px solid #eee;
	}
	
	.bdbottom {
	  border-bottom: 1px solid #eee;
	}
	
	.vcenter {
	  display: flex;
	  align-items: center;
	}
	
	.el-tag{
		margin: 7px;
	}
</style>
